<!DOCTYPE html>
<html>

<head>
  <title>Remote</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" href="../static/css/iconfont.css" />
  <link rel="stylesheet" href="../static/css/main.css">
</head>

<body>
  <div id="header">
    <!-- 消息框 -->
    <p id="message">这是内容</p>
    <!-- 顶部部件 -->
    <img src="../static/img/logo.png">
    <b><span id="name">Remote</span></b>
    <input id="match_code" class="input" type="text" placeholder="匹配码">
    <i class="iconfont icon-yonghu"></i>
  </div>

  <div id="container">
    <div id="control">
      <!-- 音乐控件 -->
      <div id="buttons-wrapper">
        <div id="play-or-pause"><i class="iconfont icon-bofangzanting"></i></div>
        <div id="volume-plus"><i class="iconfont icon-volumehigh"></i></div>
        <div id="next"><i class="iconfont icon-next-m"></i></div>
        <div id="volume-reduction"><i class="iconfont icon-volume-low"></i></div>
        <div id="previous"><i class="iconfont icon-back-m"></i></div>
      </div>
      <!-- 电源控制 -->
      <button id="button-sleep" onclick="send_code('hot_key', {description: '待机'})">待机</button>
      <button id="button-shutdown" onclick="send_code('exec', {description: '关机', code: 'poweroff'})">关机</button>
      <button id="button-close-screen" onclick="send_code('exec', {description: '息屏', code: 'xset dpms force off'})">息屏</button>
    </div>

    <!-- 传输界面 -->
    <div id="transport">
      <div id="transport-text">
        <button class="button" onclick="set_clipboard_content()">传文字到剪贴板</button>
        <button class="button" onclick="send_code('get_clipboard_content')">获取剪贴板内容</button>
        <textarea rows="5" placeholder="输入要传送的文字"></textarea>
      </div>
      <div id="transport-file">
        <form id="form">
          <input type="file" id="file-input" name="files" onchange="file_list_change(files)" multiple="multiple" />
        </form>
        <button class="button" onclick="select_file()">点击选择文件</button>
        <button class="button" onclick="upload()">上传所选文件</button>
        <div>未选择任何文件</div>
        <progress id="progress-bar" value="0" max="1"> </progress>
        <ol>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ol>
      </div>
    </div>

    <!-- 设置界面 -->
    <div id="set">
      <div>
        <span class="switch"></span>
        <span>停止旋转音乐控件</span>
      </div>
      <div>
        <span class="switch"></span>
        <span>仅显示失败的消息</span>
      </div>
      <div>
        <span class="switch"></span>
        <span>电脑执行命令后息屏</span>
      </div>
      <div>
        <span class="switch"></span>
        <span>文件上传至电脑桌面</span>
      </div>
    </div>
  </div>

  <!-- 底部tab -->
  <div id="tabs-bar">
    <ul>
      <li>
        <i class="iconfont icon-computer"></i>
        <b>电脑控制</b>
      </li>
      <li>
        <i class="iconfont icon-cc-plane"></i>
        <b>内容传输</b>
      </li>
      <li>
        <i class="iconfont icon-40"></i>
        <b>设置相关</b>
      </li>
    </ul>
  </div>

<script src="../static/js/main.js"></script>
</body>

</html>